<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .big {
            width: 500px;
            height: 500px;
            border: 1px solid #777;
            display: flex;
            /* 在主轴上的对齐方式 现在是水平方向的对齐方式 */
            /* 如果希望这个属性生效 前提是item的总宽度小于container的总宽度 */
            /* center 居中对齐 */
            /* space-between 间隔相等，贴边 */
            /* space-between 每个项目两侧的间隔相等 */
            /* space-evenly 间隔相等，不贴边 */
            justify-content: space-evenly;
            /* 交叉轴方向的对齐方式 */
            /* baseline 文字底部的基线对齐 行高也会影响 */
            align-items: baseline;
        }
        /* 一下演示的是项目上的属性 */
        /* order 可以用于排序 */
        .big div {
            background-color: yellowgreen;
        }
        .sm1 {
            /* width: 80px; */
            height: 300px;
            font-size: 20px;
            order: 2;
            flex: 1;
        }
        .sm2 {
            /* width: 100px; */
            height: 100px;
            font-size: 40px;
            order: 4;
            flex: 1;
        }
        .sm3 {
            /* width: 60px; */
            height: 130px;
            font-size: 28px;
            order: 3;
            flex: 1;
        }
        .sm4 {
            /* width: 100px; */
            height: 90px;
            font-size: 60px;
            order: 1;
            flex: 1;
        }
        .sm5 {
            /* width: 40px; */
            height: 400px;
            line-height: 2;
            order: 0;
            flex: 1;
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="sm1">sm1</div>
        <div class="sm2">sm2</div>
        <div class="sm3">sm3</div>
        <div class="sm4">sm4</div>
        <div class="sm5">sm5</div>
    </div>
</body>
</html>